import React, {Component} from 'react';
import {StyleSheet, View, ScrollView, Image, Text, TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
import {height, width} from '../../common/screen';
import SideMenu from 'react-native-side-menu';
import MineScreen from "../Mine/MineScreen";
import ProductList from "../Shop/ProductList";

export default class HomeScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            mode: 1,
            companyName: '',
            dueDate: '',
            endDate: '',
            remark: '',
            showMenu: false
        }
    }

    changeInfo(mode) {
        this.setState({
            mode: mode,
            showMenu: false
        })
    }

    toggleInfo() {
        this.setState({
            showMenu: !this.state.showMenu
        })
    }
    getInfo() {
        if (this.state.mode === 1) {
            return (
                <View>
                    <View style={{width: width, height: 200, position: 'relative', display: 'flex', justifyContent: 'center', borderTopColor: '#fff', borderTopWidth: 1}}>
                        <Image source={require('../../img/titleBg.png')} style={{width: width, height: 200, position: 'absolute'}} />
                    </View>
                    <View style={styles.infoPage}>
                        <Text style={{fontSize: 16, marginTop: 20}}>聯盈科技(香港)有限公司始創於2000年，是一間主要經營電器及數碼產品的公司，主要業務為零售及批發多款世界名牌的電子產品。</Text>
                    </View>
                </View>
            )
        } else if (this.state.mode === 2) {
            return (
                <View>
                    <View style={{width: width, height: 200, position: 'relative', display: 'flex', justifyContent: 'center', borderTopColor: '#fff', borderTopWidth: 1}}>
                        <Image source={require('../../img/titleBg2.png')} style={{width: width, height: 200, position: 'absolute'}} />
                    </View>
                    <View style={styles.infoPage}>
                        <Text style={{fontSize: 16, marginTop: 20}}>Memory Chips and Memory Module
                        </Text>
                        <Text style={{fontSize: 16, marginTop: 10}}>
                            Market : Mobile Phone, computer (System SI), Factory Manufacturer
                        </Text>
                    </View>
                </View>
            )
        } else if (this.state.mode === 3) {
            return (
                <View>
                    <View style={{width: width, height: 200, position: 'relative', display: 'flex', justifyContent: 'center', borderTopColor: '#fff', borderTopWidth: 1}}>
                        <Image source={require('../../img/titleBg.png')} style={{width: width, height: 200, position: 'absolute'}} />
                    </View>
                    <View style={styles.infoPage}>
                        <Text style={{fontSize: 18, marginTop: 20, fontWeight: 'bold'}}>公司地址</Text>
                        <Text style={{fontSize: 16, marginTop: 10}}>九龍灣常怡道 33號  宏力工業大厦 8樓 804 室</Text>
                        <Text style={{fontSize: 16, marginTop: 10}}>Unit 4, 8/F, Flourish Industrial Building,</Text>
                        <Text style={{fontSize: 16, marginTop: 10}}>33 Sheung Yee Road, Kowloon Bay,</Text>
                        <Text style={{
                            fontSize: 16,
                            marginTop: 10,
                            borderBottomColor: '#FFCC66',
                            borderStyle: 'solid',
                            borderBottomWidth: 1,
                            paddingBottom: 20
                        }}>Kowloon, Hong Kong.</Text>
                        <Text style={{fontSize: 18, marginTop: 20, fontWeight: 'bold'}}>Email</Text>
                        <Text style={{
                            fontSize: 16,
                            marginTop: 10,
                            borderBottomColor: '#FFCC66',
                            borderStyle: 'solid',
                            borderBottomWidth: 1,
                            paddingBottom: 20
                        }}>nelson@nexustech.hk</Text>
                        <Text style={{fontSize: 18, marginTop: 20, fontWeight: 'bold'}}>聯繫人&聯絡電話</Text>
                        <Text style={{fontSize: 16, marginTop: 10}}>Nelson Ho, Office Tel : 23832188</Text>
                    </View>
                </View>
            )
        } else if (this.state.mode === 5) {
            return (
                <MineScreen  navigation={this.props.navigation}/>
            )
        } else if (this.state.mode === 6) {
            return (
                <ProductList navigation={this.props.navigation} toLogin={() => {
                    this.changeInfo(5)
                }}/>
            )
        }
    }

    menu() {
        return (
            <View style={{height: height, backgroundColor: '#a0a0a0'}}>
                <View style={{height: 80, backgroundColor: '#a0a0a0' }}/>
                <TouchableOpacity style={{justifyContent: 'center', alignItems: 'center', paddingTop: 20, paddingBottom: 20, borderTopColor: '#fff', borderTopWidth: 1}} onPress={() => this.changeInfo(1)}>
                    <Text style={{fontSize: 16, color: '#fff'}}>About Us</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{justifyContent: 'center', alignItems: 'center', paddingTop: 20, paddingBottom: 20, borderTopColor: '#fff', borderTopWidth: 1}} onPress={() => this.changeInfo(2)}>
                    <Text style={{fontSize: 16, color: '#fff'}}>Business</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{justifyContent: 'center', alignItems: 'center', paddingTop: 20, paddingBottom: 20, borderTopColor: '#fff', borderTopWidth: 1}} onPress={() => this.changeInfo(3)}>
                    <Text style={{fontSize: 16, color: '#fff'}}>Contact Us</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{justifyContent: 'center', alignItems: 'center', paddingTop: 20, paddingBottom: 20, borderTopColor: '#fff', borderTopWidth: 1}} onPress={() => this.changeInfo(6)}>
                    <Text style={{fontSize: 16, color: '#fff'}}>Shop</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{justifyContent: 'center', alignItems: 'center', paddingTop: 20, paddingBottom: 20, borderTopColor: '#fff', borderTopWidth: 1}} onPress={() => this.changeInfo(5)}>
                    <Text style={{fontSize: 16, color: '#fff'}}>Member</Text>
                </TouchableOpacity>
            </View>
        )
    }

    render() {
        return (
            <SideMenu menu={this.menu()} isOpen={this.state.showMenu} menuPosition={'right'} disableGestures={true}>
                <ScrollView style={styles.container}>
                    <View style={{height: 80, paddingLeft: 20, paddingRight: 20, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#a0a0a0'}}>
                        <Text style={{fontSize: 20, color: '#ffffff'}}>Nexus Technologies</Text>
                        <TouchableOpacity onPress={() => this.toggleInfo()}>
                            <Image source={require('../../img/list.png')} style={{width: 30, height: 30}} />
                        </TouchableOpacity>
                    </View>
                    {
                        this.getInfo()
                    }
                </ScrollView>
            </SideMenu>
        );
    }
};

HomeScreen.propTypes = {
    navigation: PropTypes.object.isRequired
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff'
    },
    swiper: {
        width: width * 0.9,
        marginLeft: width * 0.05,
        marginTop: 20
    },
    image: {
        width,
        height: 200,
        resizeMode: 'stretch'
    },
    line: {
        flex: 1,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center'
    },
    img: {
        width: 0.9 * width,
        height: 200,
        marginLeft: 0.05 * width,
        marginTop: 10,
        resizeMode: 'stretch',
        borderRadius: 5
    },
    logo: {
        width: 0.2 * width,
        height: 0.2 * width,
        resizeMode: 'stretch',
        marginLeft: 0.05 * width,
        marginTop: 0.05 * width,
        borderRadius: 5
    },
    more: {
        height: 26,
        width: 26,
        resizeMode: 'stretch'
    },
    infoPage: {
        marginTop: 30,
        width: 0.9 * width,
        marginLeft: 0.05 * width,
    },
    text: {
        fontSize: 16,
        color: '#fff'
    }
});

